<template>
  

   <div class="content">
  
        <div id="kuang1" class="kuang1">
             <div class="kuang2" v-on:click="goTonext()"  style="background-color: #339933; opacity:0.8;">文学传记</div>
             <div class="kuang2" v-on:click="goTonext1()"  style="background-color:#669933; opacity:0.8;">人文社科</div>
             <div class="kuang2" v-on:click="goTonext()"  style="background-color:#CCCC99; opacity:0.8;">科学教育</div>
             <div class="kuang2" v-on:click="goTonext()"  style="background-color: #99CC99; opacity:0.8;">经济管理</div>
        </div>

   </div>
</template>

<script>
    export default{
        data(){
            return{
                
            }
        },
        methods:{
           goTonext:function(){
                this.$router.push('/detail');
            },
            goTonext1:function(){
                this.$router.push('/detail1');
            }
        }
    }
</script>

<style>
    .content{
        background-color:#ffffff;
        height: auto;
        padding-top:10%;
        padding-bottom:200%;
        margin-bottom:-18%;
    }



   
.kuang1 {
   width: 100%;
   height:auto;
}

.kuang2 {
   width: 90%;
   height: 20%;
   margin-top:2%;
   margin-right:auto;
   margin-left:auto;
   text-align: center;
   font-family: 黑体;
   font-weight: bold;
   font-size: 5em;
   color: white;
   line-height: 200px;
}


</style>
  